<template>
  <div>
    <div style="margin-left: 30px;background-color: #FCF0C6;width: 1200px;height: 100px;margin-top: 60px">
      <br>
      <p align="center" style="margin-top: 10px"><b>维数金融将根据您填写的信息进行初步审核，您填写的信息资料越真实详尽，您申请融资的审批通过率越高。同时，我们有严格的用户信息操作规范.</b></p>
      <p style="margin-left: 73px"><font color="#dc143c"><b>确保您的隐私不被泄露，请勿填写虚假信息。</b></font></p>
    </div>

    <el-form ref="form" :model="form" label-width="80px">

        <el-form-item>
          <span>金融产品选择</span>
          <template>
            <el-select @change="chanpingaibian" v-model="form.jrProductId" placeholder="请选择">
              <el-option v-for="item in options" :label="item.jr_product_name" :value="item.id"></el-option>
            </el-select>
          </template>
          <span>授信额度</span>
          <el-input disabled style="width: 100px" v-model="form.creditLine"></el-input>%
        </el-form-item>


      <el-form-item>
        <span>年一次性服务费率</span>
        <el-input v-model="form.serviceFee"  style="width: 200px"></el-input>
        <span>年利率</span>
        <el-input v-model="form.rate" style="width: 200px"></el-input>
      </el-form-item>

<!--      添加租房合同-->
      <el-button type="danger" @click="insertbaoli">添加租房合同</el-button>



      <template>
        <el-table
          :data="tableData"
          border
          style="width: 100%">
          <el-table-column
            prop="id"
            label="序号">
          </el-table-column>
          <el-table-column
            prop="roomName"
            label="房产信息">
          </el-table-column>
          <el-table-column
            prop="roomCode"
            label="房源编号">
            <template slot-scope="sc">{{sc.row.premiseName}}{{sc.row.roomCode}}</template>
          </el-table-column>
          <el-table-column
            prop="tenant_name"
            label="租客姓名">
          </el-table-column>
          <el-table-column
            prop="tenantPhone"
            label="租客手机号">
          </el-table-column>
          <el-table-column
            prop="shouldMonthRent"
            label="应收租约金额">
            <template slot-scope="sc">{{sc.row.reserve2*sc.row.monthRent}}</template>
          </el-table-column>
          <el-table-column
            prop="factoringCreditMoney"
            label="保理授信额度">
            <template slot-scope="sc">
              <span>{{sc.row.reserve2*sc.row.monthRent*form.creditLine/100}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="factoringInterest"
            label="保理利息">
            <template slot-scope="sc">
              {{sc.row.reserve2*sc.row.monthRent*(form.creditLine/100)/(12/sc.row.reserve2)*(form.rate/100)}}
            </template>
          </el-table-column>
          <el-table-column
            prop="factoringPeriod"
            label="借款期限">
            <template slot-scope="sc">{{sc.row.reserve2}}个月{{sc.row.startDate}}到{{sc.row.endDate}}</template>
          </el-table-column>
          <el-table-column
            label="操作">
            <template slot-scope="scope">
              <el-button @click="xuanzhonbaoli(index)" type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>



      <el-form-item>
        <span>应收租约合计</span>
        <el-input type="number" v-model="baolijishuan.rentMoney" disabled style="width: 200px"></el-input>
        <span>保理授信金额合计</span>
        <el-input type="number" v-model="baolijishuan.factoringCreditMoney" disabled style="width: 200px"></el-input>
      </el-form-item>


      <el-form-item>
        <span>服务费</span>
        <el-input type="number" v-model="baolijishuan.serviceMoney" disabled style="width: 200px"></el-input>
        <span>保理利息合计</span>
        <el-input type="number" v-model="baolijishuan.factoringAdditionalMoney" disabled style="width: 200px"></el-input>
      </el-form-item>

      <el-form-item>
        <span>实收保理金额</span>
        <el-input type="number" v-model="baolijishuan.factoringTrueMoney" disabled style="width: 200px"></el-input>
      </el-form-item>


      <el-form-item label="备注：">
        <el-input type="textarea" v-model="form.remark" style="width: 200px"></el-input>
      </el-form-item>


      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>







    <!--      保理对话框   -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="60%"
      :before-close="handleClose">
      <span>

        <el-form :inline="true" :model="queryParamsbl" class="demo-form-inline">
          <el-form-item label="小区名称">
            <el-input v-model="queryParamsbl.xiaoquname" placeholder="小区名称"></el-input>
          </el-form-item>
           <el-form-item label="租客姓名">
            <el-input v-model="queryParamsbl.zukename" placeholder="租客姓名"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="insertbaoli">查询</el-button>
          </el-form-item>
        </el-form>

         <template>
        <el-table
          :data="tableDatabaoli"
          border
          style="width: 100%">
          <el-table-column
            prop="tenant_name"
            label="租客姓名">
          </el-table-column>
          <el-table-column
            prop="room_name"
            label="房源信息">
          </el-table-column>
          <el-table-column
            prop="signing_date"
            label="签约日期">
          </el-table-column>

          <el-table-column
            label="操作">
            <template slot-scope="scope">
              <el-button @click="xuanzhon(scope.row.id)" type="text" size="small">选中</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>


        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParamsbl.pageNum"
          :limit.sync="queryParamsbl.pageSize"
          @pagination="insertbaoli"
        />




      </span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
    </el-dialog>


  </div>
</template>


<script>

import { listProduct, oneTenant, delProduct, addProduct, updateProduct } from "@/api/finance/product";
 import { changelistprodect } from "@/api/finance/contract";
import { listTenant, getTenant} from "@/api/finance/Factoring";
export default {
  name: "product",
  components: {
  },
  data() {
    return {
      baolijishuan:{
        rentMoney:0,//应收租约合计
        factoringCreditMoney:0,//保理授信金额合计
        serviceMoney:0,//服务费
        factoringAdditionalMoney:0,//保理利息合计
        factoringTrueMoney:0//实收保理金额
      },
      options: [],
      value: '',
      tableData: [],
      tableDatabaoli: [],
      form: {
        serviceFee:'',//年服务费
        rate:'',//利息
        businessId:'',//商户ID
        jrProductId:'',// 金融产品id
        rentMoney:0,//应收租约合计
        factoringCreditMoney:0,//保理授信金额合计
        serviceMoney:0,//服务费
        factoringAdditionalMoney:0,//保理利息合计
        factoringTrueMoney:0//实收保理金额

      },
      //产品选择
      queryParams:{
        jrProductType:3,
      },
      // 保理对话框
      dialogVisible: false,
      // 保理查询
      queryParamsbl: {
        pageNum: 1,
        pageSize: 10,
        xiaoquname: '',
        zukename: '',
      },
      //选中
      xuanzhons:{
        id: ''
      }
    }
  },
  methods: {
    //删除保理
    xuanzhonbaoli(index){
      this.tableData.splice(index, 1);
    },
    // 计算
    jishaun(data){
      // 应收租约金额  sc.row.reserve2*sc.row.monthRent
      let jine=data.reserve2*data.monthRent
      // 保理授信额度   sc.row.reserve2*sc.row.monthRent*form.creditLine/100
      let shouxin=data.reserve2*data.monthRent*Number(this.form.creditLine)/100
      // 保理利息   sc.row.reserve2*sc.row.monthRent*(form.creditLine/100)/(12/sc.row.reserve2)*(form.rate/100)
      let lixi=data.reserve2*data.monthRent*(Number(this.form.creditLine)/100)/(12/data.reserve2)*(Number(this.form.rate)/100)
      // 应收租约合计
      let rentMoney = parseFloat(Number(this.baolijishuan.rentMoney)+Number(jine)).toFixed(2)
      this.baolijishuan.rentMoney=rentMoney
      this.form.rentMoney=rentMoney
      // 保理授信金额合计
      let factoringCreditMoney = parseFloat(Number(this.baolijishuan.factoringCreditMoney)+Number(shouxin)).toFixed(2)
      this.baolijishuan.factoringCreditMoney=factoringCreditMoney
      this.form.factoringCreditMoney=factoringCreditMoney
      // 服务费    保理授信额度合计/(12/借款期限)*年服务费
      let serviceMoney = parseFloat(Number(this.baolijishuan.factoringCreditMoney)/(12/Number(data.reserve2))*(Number(this.form.serviceFee)/100)).toFixed(2)
      this.baolijishuan.serviceMoney=serviceMoney
      this.form.serviceMoney=serviceMoney
      // 保理利息合计
      let factoringAdditionalMoney = parseFloat(Number(this.baolijishuan.factoringAdditionalMoney)+Number(lixi)).toFixed(2)
      this.baolijishuan.factoringAdditionalMoney=factoringAdditionalMoney
      this.form.factoringAdditionalMoney=factoringAdditionalMoney
      // 实收保理金额   保理授信额度合计-保理利息合计-服务费
      let factoringTrueMoney = parseFloat(Number(this.baolijishuan.factoringCreditMoney)-Number(this.baolijishuan.factoringAdditionalMoney)-Number(this.baolijishuan.serviceMoney)).toFixed(2)
      this.baolijishuan.factoringTrueMoney=factoringTrueMoney
      this.form.factoringTrueMoney=factoringTrueMoney
    },
    // 选中
    xuanzhon(id){
      this.xuanzhons.id=id;
      console.log(this.xuanzhons)
      oneTenant(this.xuanzhons).then(Response=>{
        this.tableData.push(Response.rows[0]);
        this.dialogVisible=false;
        this.jishaun(Response.rows[0]);
        this.form.businessId=Response.rows[0].businessId
      })
    },
    // 产品改变
    chanpingaibian(){

      console.log("选中产品信息ID"+this.form.jrProductId)
      changelistprodect(this.form.jrProductId).then(response => {
        console.log(response)
        this.form.creditLine=response.credit_line;
      });
    },
    // 金融产品选择
    chanpinxuanzhe(){
      // console.log(this.queryParams.jrProductType);
      listProduct(this.queryParams.jrProductType).then(response => {
        console.log(response)
        this.options=response;
      });
    },
    // 关闭租房合同对话框
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    //添加保理
    insertbaoli(){
      this.dialogVisible=true;
      listTenant(this.queryParamsbl).then(response => {
        console.log("租房合同信息+++++++++++"+JSON.stringify(response))
        this.tableDatabaoli=response;
        this.total=response.total
      });
    },
    // 最终提交
    onSubmit() {
      addFactoring(this.form).then(Response=>{
        alert(Response.msg);
      })
    }
  },
  created() {
    this.chanpinxuanzhe();
  }
}
</script>
